<template>
  <div id="userq">
    <div class="user">
      <div class="yuan"></div>
      <div class="p" @click="tabClick" v-if="!isLogin">立即登录</div>
      <div v-else class="p">欢迎登陆</div>
    </div>
    <div class="main">
      <p class="p1">新上线更稳定的付费快递查询接口</p>
      <p class="p2">
        <span class="iconfont icon-rili"></span>
        <span class="span1">我的订单</span>
        <span class="span2"> > </span>
      </p>
      <ul class="ul">
        <li>
          <p class="iconfont icon-daifukuan"></p>
          待付款
        </li>
        <li>
          <p class="iconfont icon-daifahuo"></p>
          待发货
        </li>
        <li>
          <p class="iconfont icon-daishouhuo"></p>
          待收货
        </li>
        <li>
          <p class="iconfont icon-daipingjia"></p>
          待评价
        </li>
      </ul>
    </div>
    <ul class="ul1">
      <li>
          <p class="iconfont icon-yue"></p>
          <span>我的余额</span>
      </li>
      <li>
          <p class="iconfont icon-kanjia"></p>
          <span>我的砍价</span>
      </li>
      <li>
          <p class="iconfont icon-liquan"></p>
          <span>我的礼券</span>
      </li>
      <li>
          <p class="iconfont icon-shoucang"></p>
          <span>我的收藏</span>
      </li>
      <li>
          <p class="iconfont icon-dizhi1"></p>
          <span>我的地址</span>
      </li>
      <li>
          <p class="iconfont icon-kefu"></p>
          <span>我的客服</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
        isLogin:false
    };
  },
  created() {
      if(localStorage.getItem('token')){
          this.isLogin = true
      }else{
          this.isLogin = false
      }
  },
  methods: {
      tabClick(){
          this.$router.push('login')
      }
  },
};
</script>

<style lang="scss" scoped>
* {
  font-size: 0.3rem;
}
.user {
  width: 100%;
  height: 3rem;
  background-color: #c1b18f;
  .p {
    font-size: 0.5rem;
    color: white;
    padding: 1rem 2rem;
  }
  .yuan {
    width: 1.5rem;
    height: 1.5rem;
    background-color: yellow;
    position: absolute;
    border-radius: 50%;
    margin-top: 0.3rem;
    margin-left: 0.3rem;
  }
}
.main {
  width: 100%;

  .p1 {
    width: 100%;
    height: 1rem;
    text-align: center;
    border-bottom: 0.16rem solid #f5f5f5;
    line-height: 50px;
  }
  .p2 {
    width: 100%;
    height: 1rem;
    line-height: 1rem;
    border-bottom: 1px solid #ccc;
    .span1 {
      margin-left: 5%;
    }
    .span2 {
      margin-left: 65%;
    }
  }
  .ul {
    width: 100%;
    height: 1.5rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 0.16rem solid #f5f5f5;
    li {
      width: 25%;
      text-align: center;
      p {
        font-size: 0.4rem;
        margin-bottom: 5%;
      }
    }
  }
}
.ul1 {
  width: 100%;
  height: 3rem;
  border-bottom: 0.16rem solid #f5f5f5;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  li{
      width: 30%;
      height: 1.5rem;
      text-align: center;
      line-height: .5rem;
  }
}
</style>
